<style>
    #prepare .col-md-4 .panel-default {
        min-height: 210px;
    }
</style>

<header id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    </ol>

    <div class="carousel-inner">
        <div class="item active">
            <a href="javascript:">
                <div class="fill"
                     style="background-image:url('');"></div>
                <div class="carousel-body">
                    <div class="container">
                        <h1 class="display-1 text-white">微信支付宝整合</h1>
                        <h2 class="display-4 text-white">微信支付宝整合示例</h2>
                    </div>
                </div>
            </a>
        </div>
    </div>
</header>

<div class="container">

    <div class="row" id="prepare">
        <div class="col-lg-12">
            <h2 class="page-header">
                开始接入
            </h2>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4><i class="fa fa-fw fa-check"></i> 准备工作</h4>
                </div>
                <div class="panel-body">
                    <p><a href="https://b.alipay.com/" target="_blank">申请支付宝相应的支付产品，并获取相关配置</a></p>
                    <p><a href="https://pay.weixin.qq.com" target="_blank">申请微信相应的支付产品，并获取相关配置</a></p>
                    <p>插件管理中配置相应的微信或支付宝参数</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4><i class="fa fa-fw fa-gift"></i> 开发工作</h4>
                </div>
                <div class="panel-body">
                    <p>在你的PHP代码中调用相关代码进行支付，请参考控制器代码</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4><i class="fa fa-fw fa-compass"></i> 开始测试</h4>
                </div>
                <div class="panel-body">
                    <form method="post" action="{:addon_url('epay/index/experience')}">
                        <input type="hidden" name="type" value="alipay">
                        <p>请选择对应的支付金额和支付方式</p>
                        <p>
                        <span class="input-group">
                            <input type="number" name="amount" step="0.01" value="1.01" class="form-control" placeholder="金额"/>
                            <span class="input-group-addon" style="padding:0;width:150px;">
                                <select class="form-control" name="method" id="method" style="border:none;height: 32px;">
                                    <option value="web">PC网页支付</option>
                                    <option value="wap">H5手机网页支付</option>
                                    <option value="app">APP支付</option>
                                    <option value="scan">扫码支付</option>
                                    <option value="mp">公众号支付(不支持支付宝)</option>
                                    <option value="miniapp">小程序支付(不支持支付宝)</option>
                                </select>
                            </span>
                            <input type="text" class="form-control hidden" name="openid" placeholder="openid"/>
                        </span>
                        </p>
                        <button type="button" data-type="alipay" class="btn btn-info btn-experience"><i class="fa fa-money"></i> 支付宝支付</button>
                        <button type="button" data-type="wechat" class="btn btn-success btn-experience"><i class="fa fa-wechat"></i> 微信支付</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    document.querySelectorAll(".btn-experience").forEach(function(btn){
        btn.addEventListener("click", function () {
            $("input[name=type]").val($(this).data("type"));
            $(this).closest("form").trigger("submit");
        });
    });
    document.querySelector("#method").addEventListener("change", function () {
        if ($(this).val() === 'mp' || $(this).val() === 'miniapp') {
            $("input[name=openid]").removeClass("hidden");
        } else {
            $("input[name=openid]").addClass("hidden");
        }
        $("button[data-type='alipay']").prop("disabled", $(this).val() === 'mp' || $(this).val() === 'miniapp');
    });
</script>